import React from 'react'
import Mytab from './Mytab'
import './css/my.css'
import { Modal } from 'antd'
import { connect } from 'react-redux'
import { getConfigController, getEducationInfo } from './actionCreators'

class OrderList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            pageNo: 1
        }
    }
    componentDidMount() {
        this.props.dispatch(getEducationInfo(this.state.pageNo));
    }
    nextPage = () => {
        if (this.state.pageNo < this.props.pageTotalCount) {
            this.setState({ pageNo: ++this.state.pageNo })
            console.log(this.state.pageNo);
            this.props.dispatch(getEducationInfo(this.state.pageNo));
        }
    }
    upPage = () => {
        if (this.state.pageNo != 1) {
            this.setState({ pageNo: --this.state.pageNo })
            console.log(this.state.pageNo);
            this.props.dispatch(getEducationInfo(this.state.pageNo));
        }
    }
    render() {
        return (
            <div
                className='information_infos'
            >
                {
                    this.props.dataInfo.map((info) => (
                        <div className='info'
                            key={info.id}
                            onClick={() => this.props.history.push({
                                pathname: '/infodetail',
                                educationinfo: info
                            })}
                        >
                            {
                                info.state == 1
                                    ? <div className='appointment'>已预约</div>
                                    : <div className='appointment'>可预约</div>
                            }
                            <div className='order-number'>订单编号：{info.id}</div>
                            <div className='city'>城市：{info.city}</div>
                            <div className='sex'>性别：{info.sex}</div>
                            <div className='area'>区域：{info.area}</div>
                            <div className='grade'>年级：{info.grade}</div>
                            <div className='subject'>科目：{info.teacherSubject}</div>
                            <div className='remarke'>发单用户昵称：{info.remarke}</div>
                            <div className='good'>好评率：80%</div>
                        </div>
                    ))
                }
                <div className='pageno'>
                    <div
                        className='info-up'
                        onClick={this.upPage}
                    >上一页</div>
                    <span>{this.state.pageNo}/{this.props.pageTotalCount}</span>
                    <div
                        className='info-down'
                        onClick={this.nextPage}
                    >下一页</div>
                </div>
                <Mytab />
                <div className='bottom'></div>
            </div>

        )
    }
}
const mapStateToProps = (state) => ({
    dataInfo: state.dataInfo,
    pageTotalCount: state.pageTotalCount,
})
export default connect(mapStateToProps)(OrderList)
